<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="inc/default :: default"></head>
<body style="background-color: #fff">
<form class="layui-form layer-pop" id="editForm" name="editForm" style="margin-left:10px;" th:object="${systemUser}">
    <div class="layui-form-item layui-col-xs6">
        <label class="layui-form-label">账号：</label>
        <div class="layui-input-block">
            <input type="text" name="username" id="username" lay-verify="required" autocomplete="off" class="layui-input" onblur="checkExist();" th:value="*{username}"/>
        </div>
        <font style="color:red;float: right;margin-top: -30px;">*</font>
    </div>
    <div class="layui-form-item layui-col-xs6">
        <label class="layui-form-label">名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" lay-verify="required" autocomplete="off" class="layui-input" th:value="*{name}">
        </div>
        <font style="color:red;float: right;margin-top: -30px;">*</font>
    </div>
    <div class="layui-form-item layui-col-xs6">
        <label class="layui-form-label">密码：</label>
            <div class="layui-input-block" th:if="${type} eq 'update'">
                <input type="password" name="pwd" id="pwd" autocomplete="off" class="layui-input" placeholder="不修改无需输入">
            </div>
            <div class="layui-input-block" th:if="${type} ne 'update'">
                <input type="password" name="pwd" id="pwd" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
            <font style="color:red;float: right;margin-top: -30px;" th:if="${type} ne 'update'">*</font>
    </div>
    <div class="layui-form-item layui-col-xs6">
        <label class="layui-form-label">密码确认：</label>
        <th:block th:switch="${type} eq 'update'">
            <th:block th:case="true">
                <div class="layui-input-block">
                    <input type="password" name="re_pwd" id="re_pwd" lay-verify="confirmPass" autocomplete="off" class="layui-input" placeholder="不修改无需输入">
                </div>
            </th:block>
            <th:block th:case="false">
                <div class="layui-input-block">
                    <input type="password" name="re_pwd" id="re_pwd" lay-verify="required|confirmPass" autocomplete="off" class="layui-input">
                </div>
                <font style="color:red;float: right;margin-top: -30px;">*</font>
            </th:block>
        </th:block>
    </div>
    <div class="layui-form-item layui-col-xs6">
        <label class="layui-form-label">所属部门：</label>
        <div class="layui-input-block">
            <input type="hidden" name="deptId" id="deptId" th:value="*{deptId}">
            <input th:if="${type} eq 'update'" type="text" name="deptName" id="deptName" readonly="readonly" class="layui-input" onclick="openDeptTreePage(this);" th:value="*{systemDept.name}">
            <input th:if="${type} ne 'update'" type="text" name="deptName" id="deptName" readonly="readonly" class="layui-input" onclick="openDeptTreePage(this);">
        </div>
    </div>
    <div class="layui-form-item layui-col-xs6">
        <label class="layui-form-label">手机：</label>
        <div class="layui-input-block">
            <input type="tel" name="mobile" id="mobile" autocomplete="off" class="layui-input" th:value="*{mobile}">
        </div>
    </div>
    <div class="layui-form-item layui-col-xs6">
        <label class="layui-form-label">邮箱：</label>
        <div class="layui-input-block">
            <input type="email" name="email" id="email" autocomplete="off" class="layui-input" th:value="*{email}">
        </div>
    </div>
    <div class="layui-form-item layui-col-xs6">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" id="status" name="status" lay-skin="switch" lay-text="启用|禁用">
        </div>
    </div>
    <input type="hidden" name="type" id="type" value="1" />
    <input type="hidden" name="userId" id="userId" th:value="*{userId}">
    <button type="submit" class="layui-btn" lay-submit lay-filter="submit1" style="display:none;"></button>
</form>
</body>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引

    ;!function(){
        var layer1 = layui.layer
            ,form = layui.form;

        var type = [[${type}]];
        if ("update" == type) {
            if ([[${systemUser.status}]]) {
                $('#status').attr('checked', true);
            }
        } else {
            $('#status').attr('checked', true);
        }
        form.render();

        form.verify({
            confirmPass:function(value){
                if($('input[name=pwd]').val() != value)
                    return '两次密码输入不一致！';
            }
        });

        form.on('submit(submit1)', function(data){
            var msg = "新增";
            if ("update" == type) {
                msg = "修改";
            }
            $.ajax({
                type: 'post',
                url : ctxPath + 'systemUser/' + [[${type}]],
                data : data.field,
                success : function(result) {
                    if (result) {
                        layer1.msg(msg + "用户成功！", {
                            icon : 1,
                            time : 2000
                        }, function() {
                            if (index) {
                                parent.layer.close(index);
                            }
                            parent.tableIns.reload();
                        });
                    } else {
                        layer1.msg(msg + "用户失败！", {
                            icon : 2,
                            anim : 6,
                            time : 2000
                        });
                    }
                },
                error : function() {
                    layer1.msg(msg + "用户失败！", {
                        icon : 2,
                        anim : 6,
                        time : 2000
                    });
                }
            });
            return false;
        });
    }();

    //检查账号是否存在
    function checkExist() {
        if ($('#username').val() != [[${systemUser.username}]]) {
            $.post( ctxPath + "systemUser/checkExist",
                { "username" : $('#username').val() },
                function(result) {
                    if (result) {
                        layer.msg("用户" + $('#username').val() + "已存在！", {
                            icon : 2,
                            anim : 6,
                            time : 2000
                        });
                        $('#username').val('');
                    }
                }
            );
        }
    }

    function openDeptTreePage(obj) {
        layer.open({
            type : 1,
            title : '选择部门',
            maxmin : true,
            shadeClose : false,
            area : [ '350px', '400px' ],
            btn : ['确定', '取消'],
            content : '<ul id="deptTree" class="ztree"></ul>',
            success : function(layero, index) {
                var setting = {
                    async : {
                        enable : true,
                        url : ctxPath + 'systemUser/deptList',
                    },
                    data : {
                        simpleData : {
                            enable : true,
                            idKey : "deptId",
                            pIdKey : "pid"
                        }
                    },
                    callback : {
                        onAsyncSuccess : function() {
                            var treeObj = $.fn.zTree.getZTreeObj("deptTree");
                            treeObj.expandAll(true);
                        }
                    }
                };
                $.fn.zTree.init($("#deptTree"), setting);
            },
            yes: function(index,layero){
                var treeObj = $.fn.zTree.getZTreeObj("deptTree");
                var node = treeObj.getSelectedNodes()[0];
                $(obj).attr("data", node.deptId);
                $(obj).val(node.name);
                $("#deptId").val(node.deptId);
                layer.close(index);
            }
        });
    }
</script>